<template>
    <div class="order">
        <!-- 顶部导航栏 -->
        <div class="header">
            <div class="navbar">
                <h3>订单</h3>
            </div>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <!-- tab栏区域 -->
            <div class="tab">
                <van-tabs v-model="active" title-active-color="# #faaca8" color="#faaca8" @change="queryOrder">
                    <van-tab title="全部订单"></van-tab>
                    <van-tab title="待派单"></van-tab>
                    <van-tab title="待接单"></van-tab>
                    <van-tab title="待确认"></van-tab>
                    <van-tab title="已完成"></van-tab>
                </van-tabs>

            </div>
            <!-- 表格内容区域 -->
            <div class="orderData" v-if="orderData">
                <div class="itemOrder" v-for="order in orderData" @click="getDetail(order.id)">
                    <div class="orderImg">
                        <img :src="order.customer.userFace">
                    </div>
                    <div class="orderContent">
                        <div style="display: flex;justify-content: space-between;">
                            <span>{{order.customer.username}}</span>
                            <span style="color: crimson;font-size: 11px;">{{order.status}}</span>
                            <!-- <van-button color="linear-gradient(to right,#faaca8, #ddd6f3)" size="mini">
                            {{order.status}}
                        </van-button> -->
                        </div>
                        <div>
                            <p style="font-size: 12px;color:#666;">
                                {{order.address.province}}{{order.address.area}}{{order.address.address}}</p>
                        </div>
                        <div style="display: flex;justify-content: space-between;">
                            <span style="font-size: 11px;">{{order.orderTime | fmtDate_global}}</span>
                            <span style="font-size: 11px;">￥<span
                                    style="color: Crimson;font-size: 16px;margin: 0 2px;">{{order.total}}</span>元</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="orderData.length == 0" class="orderNone">
                <div>
                    <img src="https://img01.yzcdn.cn/vant/empty-image-default.png" alt="" srcset="">
                    <p v-if="active==0">您暂时没有订单</p>
                    <p v-if="active==1">您没有待派单订单噢~</p>
                    <p v-if="active==2">您没有待接单订单噢~</p>
                    <p v-if="active==3">您没有待确认订单噢~</p>
                    <p v-if="active==4">您没有已完成订单噢~</p>
                </div>
            </div>
            <div style="height: 80px;"></div>
        </van-pull-refresh>
    </div>
</template>

<script>
    // 引入vuex的辅助函数
    import {
        mapActions,
        mapState
    } from 'vuex'
    export default {
        data() {
            return {
                active: 0,
                status: '',
                customerId: 0,
                isLoading: false
            };
        },
        computed: {
            ...mapState('order', ['orderData']),
            ...mapState('user', ['userInfo'])
        },
        methods: {
            ...mapActions('order', ['getAllOrderData']),
            ...mapActions('user', ['getUserInfo']),
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.active = 0
                    this.queryOrder()
                }, 1000);
            },
            // 跳转详情
            getDetail(id) {
                this.$router.push({
                    path: 'detail',
                    query: {
                        id
                    }
                });
            },
            // 查询产品
            queryOrder() {
                if (this.active == 1) {
                    this.status = '待派单'
                } else if (this.active == 2) {
                    this.status = '待接单'
                } else if (this.active == 3) {
                    this.status = '待确认'
                } else if (this.active == 4) {
                    this.status = '已完成'
                }
                let data = {
                    page: 1,
                    pageSize: 100,
                    status: this.status,
                    customerId: this.userInfo.id
                }
                if (this.active == 0) {
                    delete data.status
                }
                // 调用vuex中的方法 传参
                this.getAllOrderData(data)
            },
        },
        created() {
            this.getUserInfo().then(res => {
                this.queryOrder(this.customerId)
            })
        },


    };
</script>

<style scoped>
    .orderNone img {
        width: 100%;
        height: 100%;
    }

    .orderNone {

        width: 160px;
        height: 160px;
        color: #969799;
        text-align: center;
        margin: auto auto;
        font-size: 14px;
    }

    .orderContent {
        margin-left: 10px;
        width: 80%;
    }

    /* 订单用户头像区域 */
    .orderImg img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: aqua;
    }

    /* 订单整体数据 */
    .itemOrder {
        display: flex;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 10px;
        box-shadow: 0 0 6px 0 #ccc;
        width: 93%;
        height: 100px;
        margin-top: 20px;
    }

    .orderData {
        margin-top: 10px;
        padding: 10px;
    }

    /* tab栏颜色 */
    .van-tabs {
        title-active-color: #faaca8;
    }

    .navbar {
        background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
        height: 46px;

        text-align: center;
        color: #fff;
    }

    .navbar h3 {
        color: #fff;
        margin-top: 0;
        line-height: 46px;
    }
</style>